<template>
	<div :class="panelClass">
		<div class="panel-heading">
			<slot name="title">
				<div class="panel-title">{{ title }}</div>
			</slot>
		</div>
		<div class="panel-body" v-show="hasBody">
			<slot></slot>
		</div>
		<slot name="other"></slot>
		<div class="panel-footer" v-show="hasFooter">
			<slot name="footer"></slot>		
		</div>
	</div>
</template>
<script>
	import { color } from './common/props'

	export default {
		props: {
			color: color(),
			title: {
				type: String,
				default: '',
			},
			hasBody: {
				type: Boolean,
				default: true,
			},
			hasFooter: {
				type: Boolean,
				default: false,
			}
		},
		computed: {
			panelClass() {
				return ['panel', 'panel-' + this.color];
			},
		}
	}
</script>